<#macro styleMacro>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden
    }

    body {
      background: #1E9FFF;
    }

    body:after {
      content: '';
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-filter: blur(3px);
      -moz-filter: blur(3px);
      -o-filter: blur(3px);
      -ms-filter: blur(3px);
      filter: blur(3px);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }

    .layui-container {
      width: 100%;
      height: 100%;
      overflow: hidden
    }

    .admin-login-background {
      width: 360px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 40%;
      margin-left: -180px;
      margin-top: -100px;
    }

    .logo-title {
      text-align: center;
      letter-spacing: 2px;
      padding: 14px 0;
    }

    .logo-title h1 {
      color: #1E9FFF;
      font-size: 25px;
      font-weight: bold;
    }

    .login-form {
      background-color: #fff;
      border: 1px solid #fff;
      border-radius: 3px;
      padding: 14px 20px;
      box-shadow: 0 0 8px #eeeeee;
    }

    .login-form .layui-form-item {
      position: relative;
    }

    .login-form .layui-form-item label {
      position: absolute;
      left: 1px;
      top: 1px;
      width: 38px;
      line-height: 36px;
      text-align: center;
      color: #d2d2d2;
    }

    .login-form .layui-form-item input {
      padding-left: 36px;
    }

    .captcha {
      width: 60%;
      display: inline-block;
    }

    .captcha-img {
      display: inline-block;
      width: 34%;
      float: right;
    }

    .captcha-img img {
      height: 34px;
      border: 1px solid #e6e6e6;
      height: 36px;
      width: 100%;
    }
  </style>
</#macro>
<#macro scriptMacro>
  <script src="${request.contextPath}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  <script src="${request.contextPath}/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
  <script>
    layui.use(['form'], function () {
      var form = layui.form,
        layer = layui.layer;
      // 粒子线条背景
      $(document).ready(function () {
        $('.layui-container').particleground({
          dotColor: '#7ec7fd',
          lineColor: '#7ec7fd'
        });
      });

      bindLoadingBtn($("body"));


    });

    function login() {
      formAjax("${request.contextPath}/login", "POST", "#loginForm", function (result) {
        if (result.success) {
          layMsg('登录成功');
          setTimeout(function () {
            window.location = '${request.contextPath}/home/';
          }, 300);
        } else {
          layMsg(result.msg);
          return false;
        }
      })
    }
  </script>
</#macro>
<@zlt.page title="博客后台管理-登陆" styleMacro=styleMacro scriptMacro=scriptMacro>
  <body>
  <div class="layui-container">
    <div class="admin-login-background">
      <div class="layui-form login-form">
        <form class="layui-form" id="loginForm">
          <div class="layui-form-item logo-title">
            <h1>博客管理后台登录</h1>
          </div>
            <#if errorMsg??>
              <blockquote class="layui-elem-quote-red layui-text">
                  ${errorMsg!}
              </blockquote>
            </#if>
          <div class="layui-form-item">
            <label class="layui-icon layui-icon-username"></label>
            <input type="text" name="account" placeholder="请输入用户名" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-item">
            <label class="layui-icon layui-icon-password"></label>
            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-item">
            <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住我">
          </div>
          <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn layui-btn-normal layui-btn-fluid loading-btn" data-reset-time="2000" onclick="login()"
            ">登
            入
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  </body>
</@zlt.page>